<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="iso-8859-1"/>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
    
    <meta property="og:title" content="furzr" />
    <meta property="og:description" content="A web art project that creates a tree linking artists of your choice with their similar artists"/>
	<meta property="og:type" content="website" />
	<meta property="og:url" content="http://furzr.net" />
	<meta property="og:image" content="http://isoartistictree.appspot.com/img/furzr_capture.png" />
    
    <meta property="fb:admins" content="1021901278" />
    
    <title>furzr</title>
    
	<link rel="stylesheet" media="screen and (max-width: 640px)" href="index_mobile.css"/>
	<link rel="stylesheet" media="screen and (min-width: 640px)" href="index.css"/>
    
    <script src="jquery-1.9.1.min.js"></script>
	<script src="arbor.js"></script>

	<script src="preview.js"></script>
	<script src="index.js"></script>

	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-39312400-1']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>

  </head>

  <body>
  
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
	</script>
	
  	<header class="state_header_normal">
  		<div id="div_header_center">
  			<h1>furzr</h1>
  		</div>
  	</header>
  	
  	<div id="div_erreur">Your browser isn't supported by this web application, sorry.</div>
  
	<div id="div_input_artist" class="state_div_input_artist_normal">
		<div id="div_input_artist_center" class="floating_div">
			<div id="button_clear" class="buttonclass">
				Clear
			</div>
			<div id="button_artist" class="buttonclass">
				Add
			</div>
			<span>
				<input id="input_artist" class="gros_input" type="text" placeholder="Give a music artist name here"/>
			</span>
		</div>
	</div>
	
	<canvas id="canvas" width="800" height="400"></canvas>

	<div id="div_artist_overview">
		<h2 id="h3_artist_overview_name"></h2>
		<div id="div_artist_overview_detail">
			<div id="div_artist_overview_image">
				<a id="a_artist_overview_lien" href="http://lastfm.com" target="_blank">
					<img id="img_artist_overview_image" src="" height=64>
				</a>
			</div>
			<span id="span_artist_overview_tags"></span>
			<br/>
			<span id="span_artist_overview_description"></span>
		</div>
	</div>
	
	<div id="div_sound" class="floating_div">
		<span id="span_sound_volume" class="buttonclass"></span>
		<span id="span_sound_title"></span>
		<audio id="audio_artist_overview_preview" hidden="true" autoplay="autoplay" src="" ></audio>
	</div>
	
	<div id="div_modes" class="floating_div">
		<div class="div_options" data="1">huge tree of death<span id="selector_huge" class="span_bull">  &bull;</span></div>
		<div class="div_options" data="2">crazy snake<span id="selector_crazy" class="span_bull"></span></div>
	</div>

	<div id="div_crazy_snake">
		
		<div id="div_cs_titre">
			<h2>Crazy snake</h2>
		</div>
		
		<div id="div_cs_content">
			<div id="div_cs_share" class="separateur">
					<h3 id="h_cs_share_title"></h3>
					This crazy snake is directly accessible from the following URL
					<input id="div_cs_url" class="gros_input"></input>
					Copy this URL to share it!
			</div>
			
			<div id="div_this_snake" class="separateur">
				<h3 id="h_snake_description"></h3>
				<div id="button_cs_save" class="buttonclass">Save and share</div>
				
				<div id="div_cs_save_form">
					<input id="input_cs_name" class="gros_input" type="text" placeholder="Give a name to your crazy snake"/>
					<input id="input_cs_pseudo" class="gros_input" type="text" placeholder="Your nickname (optional)"/>
					<div id="button_cs_save_form" class="buttonclass">Save</div>
					<div id="spinner_cs_save_form"></div>
				</div>
				
				<div id="div_cs_saved"></div>
				
			</div>
			
			<div id="div_cs_popular_list" class="separateur">
				<h3 id="h_cs_popular_list">Discover what others managed to achieve</h3>
				
				<div id="div_cs_popular_list_scroll">
					
				</div>
			</div>
		</div>
		
	</div>
	
	<div id="div_more">
		<div id="div_more_content">
			<div id="div_about" class="separateur">
				<h3>About</h3>
				<b>furzr</b> lets you discover new music artists from those you are listening now.  
				<br/>The <i>huge tree of death</i> mode creates a tree linking artists of your choice with their similar artists. 
				<br/>The <i>crazy snake</i> mode creates a chain of similar artists, so as to go away as much as possible from the music of the original artist.
				<br/><b>furzr</b> uses data from <a href="http://www.lastfm.com" target="_blank">last.fm</a> and  <a href="http://www.7digital.com/" target="_blank">7digital</a>.
			</div>
			<div id="div_contact" class="separateur">
				<h3>Any suggestions, questions and comments are welcome</h3>
		   		<input id="input_contact_email" class="gros_input" type="email" placeholder="Your email"/>
		   		<br/>
		   		<textarea id="input_contact_message" rows="4" type=text placeholder="Your message"></textarea>
		   		<br/>
		   		<div id="div_contact_send">
			   		<div id="button_contact_send" class="buttonclass">Send</div>
			   		<div id="div_contact_message_sent">Message sent</div>
				</div>
			</div>
			
			<div></div>

			<div id="div_share" class="separateur">
				<h3>If you want to share this page</h3>
				
				<div class="fb-like" 
					 data-href="http://furzr.net" 
					 data-send="true" 
					 data-width="450" 
					 data-show-faces="true"></div>
					 
				<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
				
				<div class="g-plusone" data-annotation="inline" data-width="300"></div>
				<script type="text/javascript">
				  (function() {
				    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
				    po.src = 'https://apis.google.com/js/plusone.js';
				    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
				  })();
				</script>
				
				<br/>
				<su:badge layout="5"></su:badge>
				<script type="text/javascript">
				  (function() {
				    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
				    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
				    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
				  })();
				</script>
				
				<div id="div_other_social_share">
					<img class="span_social_share" data="linkedin" src="/img/linkedin.png" width=32 title="Share on LinkedIn"/>
					<img class="span_social_share" data="delicious" src="/img/delicious.png" width=32 title="Share on Del.icio.us"/>
					<img class="span_social_share" data="digg" src="/img/digg.png" width=32 title="Digg me"/>
					<img class="span_social_share" data="reddit" src="/img/reddit.png" width=32 title="Submit to reddit"/>
					<img class="span_social_share" data="pinterest" src="/img/pinterest.png" width=32 title="Pin it"/>
					<img class="span_social_share" data="tumblr" src="/img/tumblr.png" width=32 title="Share on Tumblr"/>
				</div>
				
			</div>

			Copyright 2013, furzr
			<br/>
		</div>

   		<div id="div_more_titre">
   			<h1>furzr</h1>
   		</div>
   		
	</div>
	
	<div id="tooltip_mouseover" class="tooltip">
		Now, you can expand the tree clicking over the other artists.
	</div>
	
	<div id="tooltip_mode" class="tooltip">
		You can also add other artists by entering their names and try the crazy snake mode !
	</div>
	
	<div id="tooltip_input_artist_unknown" class="tooltip tooltip_error">
		There is no music artist known as this name. Try another.
	</div>
	
	<div id="div_voile"></div>
	
  </body>
	 
</html>
